<template>
  <div class="common-top-bar base-flex base-rows base-align-items-center base-space-between">
<!--    <div class="title">{{ props.title }}</div>-->
    <div class="breadcrumb">
      <template  v-if="breadcrumb && breadcrumb.length">
      <a-breadcrumb >
        <a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
          {{ item.title }}
<!--          <template v-if="item.path">-->
<!--            <router-link :to="item.path">{{ item.title }}</router-link>-->
<!--          </template>-->
<!--          <template v-else>{{ item.title }}</template>-->
        </a-breadcrumb-item>
      </a-breadcrumb>
      </template>
    </div>
    <div class="base-flex base-rows base-align-items-center right-content">
<!--      <a-input-search-->
<!--          v-model:value="phoneValue"-->
<!--          :placeholder="$t('self.basicLayout.tips1')"-->
<!--          style="width: 400px;"-->
<!--          @search="onSearchPhone"-->
<!--      >-->
<!--        <template #enterButton>-->
<!--          <a-button>-->
<!--            <template #icon>-->
<!--              <MobileOutlined />-->
<!--            </template>-->
<!--            {{ $t('self.basicLayout.tips2') }}-->
<!--          </a-button>-->
<!--        </template>-->
<!--      </a-input-search>-->

<!--      <div class="icon-wrapper base-ml20">-->
<!--        <a-tooltip>-->
<!--          <template #title>-->
<!--            <span>{{ $t('self.basicLayout.tips3') }}</span>-->
<!--          </template>-->
<!--          <ClearOutlined />-->
<!--        </a-tooltip>-->
<!--      </div>-->

      <div class="icon-wrapper">
        <a-tooltip>
          <template #title>
            <span>{{ $t('self.basicLayout.tips4') }}</span>
          </template>
          <BellOutlined />
        </a-tooltip>
      </div>

<!--      <div class="icon-wrapper">-->
<!--        <a-tooltip>-->
<!--          <template #title>-->
<!--            <span>{{ $t('self.basicLayout.tips5') }}</span>-->
<!--          </template>-->
<!--          <FullscreenOutlined />-->
<!--        </a-tooltip>-->
<!--      </div>-->

<!--      <div class="icon-wrapper">-->
<!--        <a-tooltip>-->
<!--          <template #title>-->
<!--            <span>{{ $t('self.basicLayout.tips6') }}</span>-->
<!--          </template>-->
<!--          <RedoOutlined />-->
<!--        </a-tooltip>-->
<!--      </div>-->

      <div class="base-ml10">
        <a-dropdown>
          <GlobalOutlined style="font-size: 18px;" />
          <template #overlay>
            <a-menu v-model:selectedKeys="lang" style="padding: 12px 15px 12px 10px; margin-top: 15px; width: 140px;" @click="handleMenuClick">
              <a-menu-item :key="item.value" v-for="(item, index) in langList">{{ item.name }}</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>

      <div class="base-ml20">
        <a-dropdown :trigger="['hover']">
          <a class="user-name" @click.prevent>
            {{ useUserStore.provider.realName }}
            <DownOutlined />
          </a>
          <template #overlay>
            <a-menu style="padding: 12px 15px 12px 10px; margin-top: 15px;">
<!--              <a-menu-item>-->
<!--                <a href="javascript:;" class="base-block base-flex base-rows base-align-items-center">-->
<!--                  <icon-font type="icon-shezhi" style="font-size: 18px; color: #999;" />-->
<!--                  <span class="base-ml5">{{ $t('self.basicLayout.tips7') }}</span>-->
<!--                </a>-->
<!--              </a-menu-item>-->
              <a-menu-item class="base-mt8">
                <a href="javascript:;" class="base-block base-flex base-rows base-align-items-center" @click="onClickExit">
                  <icon-font type="icon-tuichu" style="font-size: 18px; color: #999;" />
                  <span class="base-ml5">{{ $t('self.basicLayout.tips8') }}</span>
                </a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>


    </div>
  </div>
</template>

<script setup>
// 拨号
import { onMounted, ref, watch, createVNode, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { mainStore } from '@/stores/mainStore'
import { userStore } from '@/stores/userStore'
import { Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL
const $CONFIG = proxy.$CONFIG
const $T = proxy.$t
const useMainStore = mainStore()
const useUserStore = userStore()
const route = useRoute()
const router = useRouter()
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  breadcrumb: {
    type: Array,
    default: []
  }
})
const lang = ref([$TOOL.data.get('APP_LANG') || $CONFIG.LANG])
const langList = ref([
  {
    name: 'Chinese',
    value: 'zh-cn',
  },
  {
    name: 'English',
    value: 'en-us',
  },
  {
    name: 'Kinyarwanda',
    value: 'lwd',
  }
])

// 监听 lang 状态，语言选择
watch(
    () => props.breadcrumb,
    async (curr, old) => {
      trueBreadcrumb.value = curr
    }
);

// 实际上的面包屑
const trueBreadcrumb = ref([])
onMounted(() => {
  trueBreadcrumb.value = props.breadcrumb
})

const phoneValue = ref('')
// 拨号点击事件
const onSearchPhone = () => {
  // router.push('/crm')
}

const handleMenuClick = (e) => {
  const language = e.key
  proxy.$i18n.locale = useMainStore.lang = language
  lang.value = [language]
  // console.log('设置当前语言', proxy.$i18n.locale)
  $TOOL.data.set("APP_LANG", language)
}

// const changeBreadcrumb = (val) => {
//   trueBreadcrumb.value = []
//   trueBreadcrumb.value = val
//   console.log('变更的面包屑内容', val)
// }

const onClickExit = () => {
  // 用户退出
  Modal.confirm({
    title: $T('self.confirm.tips1'),
    icon: createVNode(ExclamationCircleOutlined),
    content: $T('self.confirm.tips2'),
    okText: $T('self.confirm.tips3'),
    cancelText: $T('self.confirm.tips4'),
    onOk() {
      // $API.home.exit.get().then(() => {
      useUserStore.loginOut()
      setTimeout(() => {
        router.push('/login')
      }, 100)
      // })
    }
  });

}
// // 子组件中要通过defineExpose将方法暴露给父组件
// defineExpose({ changeBreadcrumb })

</script>

<style lang="less" scoped>
.common-top-bar {
  height: 35px;
  .title {
    color: #323233;
    font-size: 16px;
    line-height: 1em;
  }
  .right-content {
    //background: #fff;
    padding: 8px 12px;
    .icon-wrapper {
      margin: 0 10px;
      font-size: 18px;
    }
    .user-name {
      //color: #323233;
      font-size: 14px;
    }
  }
}
</style>
